<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        section {
            width: 400px;
            height: 255px;
            border: 1px solid #000;
            margin: 20px auto;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <section>
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="4.jpg" alt="">
        <img src="5.jpg" alt="">
        <img src="6.jpg" alt="">
        <img src="7.jpg" alt="">
        <img src="8.jpg" alt="">
        <img src="9.jpg" alt="">
        <img src="10.jpg" alt="">
        <img src="11.jpg" alt="">
        <img src="12.jpg" alt="">
        <img src="13.jpg" alt="">
        <img src="14.jpg" alt="">
        <img src="15.jpg" alt="">
        <img src="16.jpg" alt="">
        <img src="17.jpg" alt="">
        <img src="18.jpg" alt="">
    </section>
</body>

</html>
<script>
    $("section").mousemove(function (event) {
        // offsetX、offsetY: 鼠标相对于事件源元素（srcElement）的X,Y坐标
        // console.log(event.offsetX,event.offsetY);
        // 将整体宽度分为18份
        var avg = $(this).width() / 18;
        // 根据鼠标的位置,来求得鼠标当前位置所处的份数
        // 从0开始的索引
        //($(this).width()-event.offsetX) 获取到的是已经移动过去的偏移量   avg 每一份的宽度
        var index = Math.floor(($(this).width() - event.offsetX) / avg);
        // console.log(index) // 获取到的是右边已经移动过了几份
        // 使第index张图片显示,而使其他的图片隐藏
        $("section img").eq(index).show().siblings().hide();
    });
</script>